<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>canvas 长短幅圆内旋轮线</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            background-size: cover;
        }


    </style>
</head>

<body>
<canvas id="my">
</canvas>

<script type="text/javascript">
    "use strict";function dong(){deg+=1,ctx.clearRect(-c.width/2,-c.height/2,c.width,c.height),ctx.lineWidth=1;var t=40*Math.cos(deg*per*10)+54*Math.cos((70/30-1)*deg*per*10),e=40*Math.sin(deg*per*10)-54*Math.sin((70/30-1)*deg*per*10);ctx.strokeStyle="#fff",ctx.lineTo(t,e),ctx.stroke(),deg>360||requestAnimationFrame(dong)}var c=document.getElementById("my");c.width=window.innerWidth,c.height=window.innerHeight,c.style.backgroundColor="#000";var ctx=c.getContext("2d");ctx.translate(c.width/2,c.height/2);var deg=0,radius=100,per=Math.PI/180;dong();

</script>
</body>

</html>